<template>
	<view class="wrapper-rich">
		<view class="header-rich">
			<text class="content content1">此投诉适用于检举商户的不合规行为。我们承诺会严格保护投诉人信息。对于商户的违法违规行为，我们都将严肃核实并严格处置</text>
			<text class="content content2">此投诉适用于检举商户的不合规行为。我们承诺会严格保护投诉人信息。对于商户的违法违规行为，我们都将严肃核实并严格处置</text>
		</view>

		<view class="unit-rich">
			<view class="item" v-if="isShowShopName">
				<text class="label">涉诉商品名称</text>
				<picker @change="activeOrderIdxChange" :value="activeOrderIdx" range-key="productName"
					:range="orderList">
					<view class="value">
						{{ returnActiveOrderContent('orderList', 'activeOrderIdx', 'productName') }}
						<image src="../../static/RICHcomplain/RICHback.png" class="back-icon" />
					</view>
				</picker>
			</view>
			<view class="item">
				<text class="label">涉诉类型</text>
				<picker @change="(event) => (activeTypeIdx = event.detail.value)" :value="activeTypeIdx"
					range-key="name" :range="typeList">
					<view class="value">
						{{ returnActiveOrderContent('typeList', 'activeTypeIdx', 'name') }}
						<image src="../../static/RICHcomplain/RICHback.png" class="back-icon" />
					</view>
				</picker>
			</view>
			<view class="item">
				<text class="label">联系电话</text>
				<input v-model="telphone" type="number" placeholder="请输入手机号" class="input" />
			</view>
		</view>
		<view class="unit-rich unit2">
			<textarea v-model="content" :placeholder="placeholder" class="text-area" auto-height
				placeholder-class="plachd" />
		</view>
		<button class="add-btn-rich" @click="submitHandler">提交投诉</button>
	</view>
</template>

<script>
	import {
		getZWZUserDetail,
		getShowLoading,
		getHideLoading
	} from '../../utils/index';

	export default {
		data() {
			return {
				placeholder: '请输入详细投诉内容，包括涉及的具体时间、人员、金额等',
				orderList: [], // 用户的订单列表
				activeOrderIdx: undefined, // 处于焦点状态的订单索引位置
				typeList: [{
						name: 'APP问题',
						id: 10
					},
					{
						name: '财务问题',
						id: 11
					},
					{
						name: '账户注销',
						id: 12
					},
					{
						name: '物流问题',
						id: 13
					},
					{
						name: '意见反馈',
						id: 14
					},
					{
						name: '投诉客服',
						id: 15
					}
				], // 投诉类型，每项数据形如{ id, name }
				activeTypeIdx: undefined, // 处于焦点状态的投诉类型索引位置
				telphone: '', // 手机号
				images: [], // 投诉的描述图片
				fromOrderId: '', // 订单ID
				content: '', // 用户输入的详细投诉内容
				orderType: 0, //接口传参
				isShowShopName: false ,//在选择涉诉类型之后，再判断涉诉商品名称这一栏是否出现
				
				
				//下面是没用的垃圾混淆代码
				renzhengTimeSta1111111: true, //初次请求认证时间默认是带有的，
				zhuceTimeSta11111: false, //初次请求注册时间默认是没有的
				renzhengTimeList11111: [],
				zhuceTimeStaList1111: null,
				detailOrderIdStr11111: '',
				threeTabCurrent1111: 0,
				applyGOodsList11111: [], //供货商列表
				allCardEnterSta1111: false, //默认是false，点击批量卡券入库的时候变为true
				codeAddNumsList11111: [],
				numsList11111: [],
				dataSourceBqcp1111: [],
				selectedRowKeys1111: [],
				selectedRowKeysB11111: [],
				rkVisible11111: false,
				rkjlVisible1111: false,
				lhjlVisible1111: false,
				currentStyleData22222: {},
				dataSourceStyle2222: [],
				showStyleData2222: false,
				indexTemplate2222: [],
				SVGCircleElement3ee: '',
				vshoweqwsc1111: false,
				showStyleDataInfo2222: false,
				opeCategoryList2222: [],
				leimuVisible2222: false,
				selectedRowKeys02222: [],
				selectionRows02222: [],
				selectedRowKeys133333: [],
				selectionRows13333: [],
				selectedRowKeys2333: [],
				selectionRows23333: [],
				selectedRowKeys33333: [],
				selectionRows33333: [],
				selectedRowKeys4333: [],
				selectionRows43333: [],
				curwfqwrentStyleDaterwaInfo444: {},
				currwerentStywerleDatweraInfo1444: {},
				currewerntStyleDataInfo24444: {},
				currentweStyleDytuataIwenfo34444: {},
				currenwetStdfgyleDataInfo44444: {},
				checkZfbPhone_h5444: '',
				plNafgdvfdtjyme4444: '', //四大品类的名字
				uniPdfgrtylatform444: '', //运行环境mp-alipay mp-weixin
				refgjtytrsemark555: '', //备注
				timefgjSelStr5555: '', //选择的上门时间（2023-08-31 00:00:00）
				amOdcuiofasrpm5555: '', //选择的上门时间是上午还是下午
				pageShnjlkgohowTime5555: '', //页面上用户看到的显示的时间
				paraghsdfmsw454: {},
				valhgujtueNum56756: 0,
				addrdraess56756: {}, //上门收货地址
				adawerterydressId575: 0,
				sceoyuitne57567: '',
				tntuiopId56757: '',
				weictyuratCustomer5756: '',
				yuidurtyuoy567567: false,
				
				
				//下面是没用的垃圾混淆代码
				renzhengTimeSta1111111: true, //初次请求认证时间默认是带有的，
				zhuceTimeSta11111: false, //初次请求注册时间默认是没有的
				renzhengTimeList11111: [],
				zhuceTimeStaList1111: null,
				detailOrderIdStr11111: '',
				threeTabCurrent1111: 0,
				applyGOodsList11111: [], //供货商列表
				allCardEnterSta1111: false, //默认是false，点击批量卡券入库的时候变为true
				codeAddNumsList11111: [],
				numsList11111: [],
				dataSourceBqcp1111: [],
				selectedRowKeys1111: [],
				selectedRowKeysB11111: [],
				rkVisible11111: false,
				rkjlVisible1111: false,
				lhjlVisible1111: false,
				currentStyleData22222: {},
				dataSourceStyle2222: [],
				showStyleData2222: false,
				indexTemplate2222: [],
				SVGCircleElement3ee: '',
				vshoweqwsc1111: false,
				showStyleDataInfo2222: false,
				opeCategoryList2222: [],
				leimuVisible2222: false,
				selectedRowKeys02222: [],
				selectionRows02222: [],
				selectedRowKeys133333: [],
				selectionRows13333: [],
				selectedRowKeys2333: [],
				selectionRows23333: [],
				selectedRowKeys33333: [],
				selectionRows33333: [],
				selectedRowKeys4333: [],
				selectionRows43333: [],
				curwfqwrentStyleDaterwaInfo444: {},
				currwerentStywerleDatweraInfo1444: {},
				currewerntStyleDataInfo24444: {},
				currentweStyleDytuataIwenfo34444: {},
				currenwetStdfgyleDataInfo44444: {},
				checkZfbPhone_h5444: '',
				plNafgdvfdtjyme4444: '', //四大品类的名字
				uniPdfgrtylatform444: '', //运行环境mp-alipay mp-weixin
				refgjtytrsemark555: '', //备注
				timefgjSelStr5555: '', //选择的上门时间（2023-08-31 00:00:00）
				amOdcuiofasrpm5555: '', //选择的上门时间是上午还是下午
				pageShnjlkgohowTime5555: '', //页面上用户看到的显示的时间
				paraghsdfmsw454: {},
				valhgujtueNum56756: 0,
				addrdraess56756: {}, //上门收货地址
				adawerterydressId575: 0,
				sceoyuitne57567: '',
				tntuiopId56757: '',
				weictyuratCustomer5756: '',
				yuidurtyuoy567567: false,
			};
		},
		components: {},
		onInit() {
			this.$goLogin();
		},
		onLoad(opt) {
			this.fetchOrderList().finally(this.fetchTypeList);
			this.fromOrderId = opt.orderId; // 从上个页面带下来的订单ID
			if (opt.con) {
				this.placeholder2 = opt.con;
				this.placeholder = opt.con;
			}
		},

		methods: {
			activeOrderIdxChange(e) {
				this.activeOrderIdx = e.detail.value;
			},
			/**
			 * 返回选中的订单，投诉类型
			 * @param {string} listKey : 列表的字段名
			 * @param {string} activeKey : 处于焦点的字段名
			 * @param {string} valueKey : 字段在VO中的名字
			 */
			returnActiveOrderContent(listKey, activeKey, valueKey) {
				const listData = this[listKey];
				const idx = this[activeKey];
				if (listData == undefined) return '请选择';
				const activeObj = listData[idx];
				if (!activeObj) return '请选择';
				if (listKey == 'orderList') {
					if (activeObj[valueKey].toString().length > 15) {
						return activeObj[valueKey].toString().slice(0, 15) + '...';
					} else {
						return activeObj[valueKey];
					}
				} else {
					return activeObj[valueKey];
				}
			},
			/**
			 * 获取用户可进行投诉操作的订单列表数据
			 */
			fetchOrderList(ortype) {
				return this.$request(
					'order/mall/aliPay/orderComplaints/getOrderAndShopName', {
						orderType: 2
					},
					'get',
					true,
					false
				).then((res) => {
					const resData = res.data || []; // 用户可投诉的订单列表数据
					this.findActiveOrderIdxByOrderNum(resData); // 加载完订单列表数据之后，找到处于焦点的订单号
				});
			},
			/**
			 * 根据订单号找到索引值
			 */
			findActiveOrderIdxByOrderNum(arr) {
				if (!this.fromOrderId) return;
				for (let i = 0; i < arr.length; i++) {
					const obj = arr[i];
					if (obj.orderId == this.fromOrderId) {
						this.activeOrderIdx = i;
						return;
					}
				}
			},

			fetchTypeList() {
				return this.$request('order/mall/aliPay/orderComplaints/getOrderComplaintsTypes', {}, 'get').then((
					res) => {
					const resData = res.data || [];
					// this.typeList = resData;
				});
			},

			returnPostObj() {
				const {
					userName,
					nickName,
					shopId
				} = getZWZUserDetail();
				const name = userName || nickName; // 优先取userName字段（实名认证之后的姓名），取不到的话再取nickName，这是支付宝昵称
				const shopId1 = shopId;
				const telphone = this.telphone; // 用户填写的手机号
				const content = this.content;
				// 获取所投诉订单的店铺id和订单id
				const orderListArray = this.orderList || [];
				const activeOrderObj = orderListArray[this.activeOrderIdx] || {};
				const {
					orderId,
					productId
				} = activeOrderObj;
				const typeArray = this.typeList || [];
				const activeTypeObj = typeArray[this.activeTypeIdx] || {};
				const {
					id: typeId
				} = activeTypeObj;
				const images = this.images;
				const postObj = {
					uid: this.$getUid(),
					name,
					telphone,
					content,
					shopId: shopId1,
					orderId,
					typeId,
					orderType: this.orderType,
					purchaseItemsId: productId, //productId
					images: []
				};
				// 支付宝小程序端
				// #ifdef MP-ALIPAY
				postObj.appletappid = my.getAppIdSync().appId;
				// #endif
				if (!typeId) {
					uni.showToast({
						icon: 'none',
						title: '请选择类型'
					});
					return false;
				}
				if (images && images.length) postObj.images = images;
				const cnMap = {
					uid: '用户ID',
					name: '用户ID',
					telphone: '联系电话',
					content: '投诉内容',
					shopId: '涉诉商户',
					orderId: '订单ID',
					typeId: '涉诉类型'
				};
				const {
					postData,
					pass
				} = this.$postDataGuard(postObj, cnMap);
				return {
					postData,
					pass
				};
			},
			/**
			 * 监听点击提交按钮
			 */
			submitHandler() {
				const {
					postData,
					pass
				} = this.returnPostObj();
				//if (!pass) return // 缺少参数
				if (this.posting) return; // 正在提交中
				this.posting = true;
				if (this.activeTypeIdx === undefined) {
					uni.showToast({
						icon: 'none',
						title: '请选涉诉类型'
					});
					this.posting = false;
					return false;
				}
				if (!this.telphone || this.telphone.length <= 10) {
					uni.showToast({
						icon: 'none',
						title: '手机号格式不正确！'
					});
					this.posting = false;
					return false;
				}

				if (!this.content || this.content.length <= 5) {
					uni.showToast({
						icon: 'none',
						title: '内容太短了，请您至少输入5个字！'
					});
					this.posting = false;
					return false;
				}
				getShowLoading({
					title: '提交中'
				});
				this.$request('order/mall/aliPay/orderComplaints/addOrderComplaints', postData, 'post')
					.then((res) => {
						if (res.data) {
							getHideLoading();
							uni.showToast({
								icon: 'none',
								title: '投诉成功'
							});
							setTimeout(() => {
								uni.navigateBack();
							}, 500); // 1秒后进行页面
						}
					})
					.finally(() => {
						getHideLoading();
						this.posting = false;
					});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.wrapper-rich {
		min-height: 100vh;
		box-sizing: border-box;
		background: #f7f8fb;
		padding-bottom: 150rpx;

		.header-rich {
			overflow: hidden;
			white-space: nowrap;
			position: relative;
			@include global-background-color-red();
			margin-bottom: 20rpx;
			height: 60rpx;

			.content {
				position: absolute;
				font-weight: 400;
				color: #fff;
				animation-iteration-count: infinite !important;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				height: 60rpx;
				line-height: 60rpx;
			}

			.content1 {
				animation: scroll1 30s linear;
			}

			.content2 {
				animation: scroll2 30s linear;
			}
		}

		.unit-rich {
			margin: 0 20rpx;
			padding: 0 20rpx;
			background: #fff;
			border-radius: 20rpx;


			.item {
				align-items: center;
				height: 80rpx;
				display: flex;
				justify-content: space-between;

				.label {
					font-weight: 400;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					color: #333333;
				}

				.value {
					align-items: center;
					color: #999999;
					display: flex;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;

				}

				.back-icon {
					width: 10rpx;
					height: 16rpx;
					margin-left: 10rpx;
				}

				.input {
					font-size: 28rpx;
					font-weight: 400;
					color: #999999;
					font-family: PingFangSC-Regular, PingFang SC;
					text-align: right;

				}
			}
		}

		.unit-rich+.unit-rich {
			margin-top: 20rpx;
		}

		.add-btn-rich {
			width: 80%;
			color: #fff;
			font-size: 28rpx;
			margin: 0 auto;
			@include global-background-color-red();
			border-radius: 100px;
		}

		.unit2 {
			margin-bottom: 30rpx;
			box-sizing: border-box;
			padding-top: 20rpx;
			padding-bottom: 20rpx;


			.text-area {
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999;
				min-height: 200rpx;
				width: 100%;
				box-sizing: border-box;
				font-size: 28rpx;
			}
		}

		.img-list {
			padding: 0 30rpx;
		}
	}

	@keyframes scroll1 {
		0% {
			left: 0;
		}

		100% {
			left: -58em;
		}
	}

	@keyframes scroll2 {
		0% {
			left: 58em;
		}

		100% {
			left: 0;
		}
	}
</style>